<template>
  <div class="autocomplete-wrap">
    <!-- 此页面病患树 -->
    <el-autocomplete class="cu-autocomplete"
      v-model="curAddress"
      :fetch-suggestions="searchAddress"
      :trigger-on-focus="false"
      clearable
      @select="selectAddress"
    >
      <template slot="prepend">全部  |</template>
      <el-button slot="append" type="text" icon="el-icon-search"  @click.stop="searchAddress"></el-button>
    </el-autocomplete>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import { bhfbServer } from '@/api/installServer';

@Component({
  name: 'Autocomplete',
  components: {}
})
export default class Autocomplete extends Vue {
  private curAddress: any = '';
  public searchAddrByKey(val: any) {
    return new Promise(resolve => {
      bhfbServer
        .searchAreaData({word: val})
        .then((res: any) => {
          if(res.status === 200 && res.data.code === 0) {
            const result = res.data.data;
            resolve(result);
            return;
          }
        })
        .catch((error: any) => {});
    });
  }

  // 选中搜索到的地址
  @Emit('selAddress')
  private selectAddress(item: any) {
    // this.$set(this.formdata.data, "areaCode", item.address.district);
    // this.$set(this.formdata.data, "x", item.location.x);
    // this.$set(this.formdata.data, "y", item.location.y);
    return item.location;
  }
  // 事发地点搜索地址
  private searchAddress(val: any, cb: any) {
    val = encodeURI(val);
    this.searchAddrByKey(val).then((result: any) => {
      result.forEach((item: any) => {
        item.value = item.name;
      });
      cb(result);
    });
  }
}
</script>
<style lang="less" scoped>
</style>

<style lang="less">
// .autocomplete-wrap {
//   .el-input-group {
//     height: 40px;
//     background-color: #002138;
//     border-radius: 4px;
//     border: solid 1px rgba(131, 239, 255, 0.66)
//   }
//   .el-input__inner {
//     height: 42px;
//     line-height: 42px;
//     background: transparent;
//     border: none;
//   }
//   .el-input-group__append {
//     background-color: transparent;
//     border: none;
//   }
//   .el-input-group__prepend {
//     width: 38px;
//     height: 18px;
//     border: none;
//     font-family: MicrosoftYaHei;
//     font-size: 18px;
//     font-weight: normal;
//     font-stretch: normal;
//     line-height: 42px;
//     letter-spacing: 1px;
//     color: #c2e7f2;
//     background-color: transparent;
//   }
// }
</style>


